<template>
  <el-menu active-text-color="#fff" class="el-menu-vertical-demo" default-active="2" text-color="#fff" @open="handleOpen"
    @close="handleClose">

    <router-link to="/login">
      <el-menu-item index="1">
        <img src="../assets/img/info.svg" alt="个人信息" width="20px" class="menu-img">
        <span>个人信息</span>
      </el-menu-item>
    </router-link>

    <router-link to="/login/my-articles">
      <el-menu-item index="2">
        <img src="../assets/img/articles.svg" alt="我的文章" width="20px" class="menu-img">
        <span>我的文章</span>
      </el-menu-item>
    </router-link>

    <router-link to="/login/my-tasks">
      <el-menu-item index="3">
        <img src="../assets/img/task.svg" alt="我的任务" width="20px" class="menu-img">
        <span>我的任务</span>
      </el-menu-item>
    </router-link>

    <router-link to="/publish">
      <el-menu-item index="4">
        <img src="../assets/img/scanner.svg" alt="" width="20px" class="menu-img">
        <span>我要发布</span>
      </el-menu-item>
    </router-link>


      <el-menu-item index="5" @click="handleLogout">
        <img src="../assets/img/exit.svg" alt="退出" width="20px" class="menu-img">
        <span>个人退出</span>
      </el-menu-item>


  </el-menu>
</template>


<script setup>
// import { menuList } from '@/api/menu'
import api from '../api/api.js'
import router from '../router'
import { userStore } from '../stores/userStore';

const userInfo=userStore()

const handleLogout=async()=>{
  try {
    userInfo.clearUserInfo()
    await api.logoutApi({})

    router.push('/login02')

  } catch (error) {
    console.log("退出失败",error)
  }
}


</script>

<style scoped lang="less">
.el-menu-vertical-demo {
  /* 控制菜单的高度 */
  display: flex;
  flex-direction: column;
  background-color: #d6edf9;
}

/* 调整字体大小和居中 */
.el-menu-item span {
  font-size: 18px;
  /* 设置字体大小 */
  line-height: 50px;
  /* 设置行高，使文本垂直居中 */
  text-align: center;
  /* 设置水平居中 */
  margin-left: 12px;
  /* 设置文本与图标的间距 */
  color: #000;
}

.el-menu-item {
  /* 设置菜单项的高度 */
  height: 72px;
  /* 自定义高度 */
  line-height: 50px;
  /* 让文本垂直居中 */
}

.el-menu-item .el-icon {
  margin-right: 10px;
  /* 图标与文本之间的间距 */
}

.router-link-active {
  text-decoration: none;
  color: #fff;
}

img {
  padding: 0px 0px 0px 0px;
}

a {
  text-decoration: none;
  color: #fff;
}</style>
